<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html ng-app="LifeModule" lang="en">
<head>
<title>Life</title>
<script src="angular-1.0.1.min.js"></script>
<style type="text/css">
body {
font-family:"Courier New";
font-weight:bold;
}

#main_board {
font-size:16px;
}

#history {
font-size:6px;
}

#alive {
color: #0000FF
}

@-webkit-keyframes will_die_anim {
0% {color: #4400FF;}
70% {color: #F5C5FF;}
100% {color: #4400FF;}
}

#will_die {
-webkit-animation: will_die_anim 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
}

@-webkit-keyframes will_live_anim {
0% {color: #F2F2FF;}
60% {color: #5555FF;}
100% {color: #F2F2FF;}
}

#will_live {
color:#F2F2FF;
}

#empty {
color:#E6E6E6
}

ul {
white-space: nowrap;
padding: 2px;
}

li {
display: inline-block;
list-style-type: none;
white-space: nowrap;
padding: 3px;
}
</style>
</head>

<body>

<div ng-controller="LifeController">
  <div id="main_board">
    <div ng-repeat="row in display_board">
      <span ng-repeat="element in row">
	<span ng-click="toggle(element)" id="{{element | gen_id}}">{{element | display_cell:True}}</span>
      </span>
    </div>
  </div>
  <button ng-click="advance()">Advance</button>

  <div id="history" style="border:solid 2px #000000; padding: 5px; height: 170px; overflow:auto">
    <ul>
      <li ng-repeat="old_board in board_history">
	<div ng-click="change_display(old_board)" style="border:solid 1px {{old_board | history_border_color}}; padding: 5px">
	  <div ng-repeat="row in old_board">
	    <span ng-repeat="element in row">
	      <span id="{{element | history_id}}">{{element | display_cell:False}}</span>
	    </span>
	  </div>
	</div>
      </li>
    </ul>
  </div>
</div>

</body>
<script type='text/javascript' src='life.js'></script>
</html>
